<template>
  <div v-show="!isMain && !isView" class="add-equip-detail">
    <px-scrollbar class="add-equip-content">
      <px-button style="margin: 16px 0 -4px" type="primary" icon="ArrowLeft" @click="backMainPage">返回</px-button>
      <px-form ref="formRef" :inline="true" :model="formValue" :rules="rules" label-position="right" label-width="120px">
        <EditDropDown dropdownTitle="点位信息">
          <template v-slot:content>
            <px-row>
              <px-col :span="8">
                <px-form-item label="点位编码" prop="tagCode">
                  <px-input v-model="formValue.tagCode" placeholder="请输入" maxlength="50" clearable />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="点位描述" prop="tagComment">
                  <px-input v-model="formValue.tagComment" placeholder="请输入" maxlength="50" clearable />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="点位单位" prop="tagUnit">
                  <px-select v-model="formValue.tagUnit" filterable clearable placeholder="请选择" style="width: 100%">
                    <px-option v-for="item in tagUnitList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="设备编码" prop="eqpId">
                  <px-select-v2
                    v-model="formValue.eqpId"
                    style="width: 100%"
                    filterable
                    clearable
                    :options="mapEqpIdList"
                    placeholder="请选择"
                    @change="changeEqpId"
                  />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="子包" prop="intouchPackageName">
                  <px-select v-model="formValue.intouchPackageName" filterable clearable placeholder="请选择" style="width: 100%">
                    <px-option v-for="item in intouchPackageNameList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="常量点位" prop="isConstant">
                  <px-radio-group v-model="formValue.isConstant">
                    <px-radio :label="0">否</px-radio>
                    <px-radio :label="1">是</px-radio>
                  </px-radio-group>
                </px-form-item>
              </px-col>
              <px-col v-if="formValue.isConstant == '1'" :span="8">
                <px-form-item label="常量值" prop="constantValue">
                  <px-input v-model="formValue.constantValue" clearable placeholder="请选择" maxlength="50" />
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="表底区间" prop="constantValue">
                  <div style="display: flex; flex-direction: row">
                    <px-input-number v-model="formValue.tableValueMin" :max="999999999" :precision="2" />
                    <span style="margin: 0 6px">—</span>
                    <px-input-number v-model="formValue.tableValueMax" :max="999999999" :precision="2" />
                  </div>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="对应设备状态" prop="eqpStatus">
                  <px-select v-model="formValue.eqpStatus" filterable clearable placeholder="请选择" style="width: 100%">
                    <px-option v-for="item in eqpStatusList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="采集类别" prop="collectType">
                  <px-select v-model="formValue.collectType" filterable clearable placeholder="请选择" style="width: 100%">
                    <px-option v-for="item in pointTypeList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
              <px-col :span="8">
                <px-form-item label="数据类型" prop="dataType">
                  <px-select v-model="formValue.dataType" filterable clearable placeholder="请选择" style="width: 100%">
                    <px-option v-for="item in dataTypeList" :key="item.id" :label="item.name" :value="item.value" />
                  </px-select>
                </px-form-item>
              </px-col>
            </px-row>
          </template>
        </EditDropDown>
      </px-form>
    </px-scrollbar>
    <div class="info-form-btns">
      <px-button @click="backMainPage">取消</px-button>
      <px-button type="primary" @click="handleSubmit(formRef)">保存</px-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { queryDictData } from "@/api/common";
import { createPoint, editData, queryListByEqpIds } from "@/api/system/pointManage";
import EditDropDown from "@/views/all/equip/components/EditDropDown.vue";
import { PxMessage } from "px-ui";
import { computed, reactive, ref, toRefs, watch } from "vue";

// 调用父级-返回主页、查询列表方法
const emits = defineEmits(["backMainPage", "queryTable"]);
// 父级传过来的值
const props = defineProps(["isMain", "isView", "drawerType", "rowData"]);
// 显示隐藏
const isMain = computed(() => props.isMain);
const isView = computed(() => props.isView);
// 页面本身的值
const formRef = ref();
const state = reactive<any>({
  formValue: {
    isConstant: 0,
    systemCode: "",
    className: ""
  },
  tagUnitList: [],
  mapEqpIdList: [],
  intouchPackageNameList: [],
  eqpStatusList: [],
  pointTypeList: [],
  dataTypeList: []
});
const { formValue, tagUnitList, mapEqpIdList, intouchPackageNameList, eqpStatusList, pointTypeList, dataTypeList } = toRefs(state);
// 表单校验规则
const rules = computed(() => ({
  tagCode: [{ required: true, message: "点位编号不能为空", trigger: "blur" }],
  tagComment: [{ required: true, message: "	点位描述不能为空", trigger: "blur" }],
  isConstant: [{ required: true, message: "常量点位不能为空", trigger: "blur" }],
  eqpId: [{ required: true, message: "设备编码不能为空", trigger: "change" }],
  intouchPackageName: [{ required: true, message: "子包不能为空", trigger: "change" }]
}));
// 监视isMain和isView值
watch(isMain, async val => {
  if (!val && !props.isView) {
    formRef.value.resetFields();
    queryTagUnitList();
    queryListByEqpIdsPlus();
    if (props.drawerType === "add") {
      formValue.value.isConstant = 0;
    } else if (props.drawerType === "edit") {
      formValue.value = props.rowData;
    }
  } else {
    formValue.value = {
      isConstant: 0
    };
  }
});

// 设备编码下拉框
const queryListByEqpIdsPlus = async () => {
  const data: any = await queryListByEqpIds({});
  mapEqpIdList.value = data.map(item => ({ value: item.eqpId, label: item.eqpId }));
};
//点位单位和子包下拉框
const queryTagUnitList = async () => {
  tagUnitList.value = (await queryDictData({ typeCode: "MEASURE_UNIT" })) || [];
  intouchPackageNameList.value = (await queryDictData({ typeCode: "INTOUCH_PACKAGE_NAME" })) || [];
  eqpStatusList.value = (await queryDictData({ typeCode: "POINT_EQP_STATUS" })) || [];
  pointTypeList.value = (await queryDictData({ typeCode: "POINT_COLLECT_TYPE" })) || [];
  dataTypeList.value = (await queryDictData({ typeCode: "DATA_TYPE" })) || [];
};
//选中eqpid
const changeEqpId = async val => {
  const data = await queryListByEqpIds({ eqpIds: [val] });
  formValue.value.systemCode = data[0].systemCode;
  formValue.value.className = data[0].className;
};
// 返回主页面
const backMainPage = () => {
  formRef.value.resetFields();
  emits("backMainPage");
  emits("queryTable");
};

// 提交
const handleSubmit = async (formEl: any) => {
  if (!formEl) return;
  await formEl.validate(async valid => {
    if (valid) {
      if (formValue.value.isConstant == "0") {
        formValue.value.constantValue = "";
        const params = formValue.value;
        if (props.drawerType === "add") {
          await createPoint(params);
          PxMessage.success("创建成功");
          emits("backMainPage");
          emits("queryTable");
        } else if (props.drawerType === "edit") {
          await editData(params);
          PxMessage.success("编辑成功");
          emits("backMainPage");
          emits("queryTable");
        }
      } else {
        const params = formValue.value;
        if (props.drawerType === "add") {
          await createPoint(params);
          PxMessage.success("创建成功");
          emits("backMainPage");
          emits("queryTable");
        } else if (props.drawerType === "edit") {
          await editData(params);
          PxMessage.success("编辑成功");
          emits("backMainPage");
          emits("queryTable");
        }
      }
      console.log(formValue.value.constantValue);
    }
  });
};
</script>
<style lang="scss" scoped>
@import url("@/views/all/equip/scss/add-detail.scss");
</style>
